<template>
  <div class="wrapper">
    <headTab :checkIndex="checkIndex" @checkTabChange="checkTabChange"></headTab>
    <div v-if="myCurrComp">
      <!-- 样式 -->
      <div v-if="checkIndex === 0">
        <div class="styleItem" v-for="(item,index) in myCurrComp.attribute" :key="index">
          <span class="label">{{item.name}}:</span>
          <!-- 渲染对应的组件 -->
          <!-- input组件 -->
          <input
            class="iptStyle"
            @blur="updateComp"
            type="text"
            v-if="item.type == 'input'"
            v-model="item.value"
          />
          <!-- color组件 -->
          <input
            class="iptStyle"
            @change="updateComp"
            type="color"
            v-if="item.type == 'color'"
            v-model="item.value"
          />
        </div>
      </div>
      <!-- 数据 -->
      <div v-if="checkIndex === 1">
        <textarea class="dataBox" v-model="dataStr" @change="updateComp" type="textarea"></textarea>
      </div>
    </div>
    <div v-else style="padding:15px">当前没有正在编辑的组件</div>
  </div>
</template>

<script>
import headTab from "./comps/headTap.vue";
import getComponent from "../templates/index";
import { mountedComponent } from "../utils";
export default {
    name: "rightView",

    data() {
        return {
            checkIndex: 0,
            dataStr: "",
        };
    },
    props: {
        myCurrComp: {
            type: Object,
        },
    },
    components: {
        headTab,
    },
    methods: {
        checkTabChange(index) {
            this.checkIndex = index;
        },
        //更新组件的数据
        updateComp() {
            //1.获取组件数据
            let component = getComponent(
                this.myCurrComp.info,
                this.myCurrComp.attribute,
                this.dataStr
            );
            //2.设置组件的位置
            component.position = this.myCurrComp.position;
            //重新挂载组件
            mountedComponent(component);
        },
    },
    watch: {
        myCurrComp(val) {
            this.dataStr = JSON.stringify(val.data);
        },
    },
};
</script>

<style scoped lang="less">
.wrapper {
    width: 350px;
    .styleItem {
        margin: 10px;
        display: flex;
        .label {
            display: inline-block;
            width: 80px;
        }
        .iptStyle {
            flex: 10;
        }
    }
    .dataBox {
        min-height: 300px;
        width: 90%;
        margin: 15px;
    }
}
</style>